<template>
  <el-card
    class="device-status work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="device-status__header work-bench-department__card__header">
      <span class="work-bench-department__card__title device-status__title">设备状况</span>
    </div>
    <div class="work-bench-department__card__body device-status__body">
      <div v-for="item in list" :key="item.name" class="device-status__item">
        <div :ref="item.refName" class="device-status__chart"></div>
        <div class="device-status__ratio" :style="{ color: item.color }">
          <span class="device-status__ratio__value">{{ item.ratio }}</span>
          <span>%</span>
        </div>
        <div class="device-status__total">总数: {{ item.value }}</div>
        <div class="device-status__label">{{ item.label }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'
import { drewGauge } from './gauge'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptDeviceStatus',

  data() {
    return {
      list: [],
    }
  },

  mounted() {
    dashboardDeptApi.queryDeptDeviceStatus().then((res) => {
      const total = (res.info || []).reduce((num, item) => num + item.value, 0)
      this.list = (res.info || []).map((item) => {
        return {
          ...item,
          refName: `device_${item.name}_gauge_chart_ref`,
          ratio: Math.round(item.value / total * 100),
          color: { online: '#00B07E', off: '#B5BDC6', error: '#FF6A55' }[item.name],
        }
      })
      this.$nextTick(() => {
        this.list.forEach((item) => {
          drewGauge(this.$refs[item.refName][0], item.ratio, item.color)
        })
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
